<template>
<div>
	<!--添加字段-->
	<fieldForm ref="fieldform"></fieldForm>

	<!--删除任务-->
	<el-dialog title="删除任务" :visible.sync="delTaskVisible" width="40%">
		<div slot="title" class="dialog-title">
	    <i class="fa fa-warning" style="color: red"></i>
	    <span class="title-text">删除任务</span>
	  </div>
		<el-form>
	    <el-form-item label="任务名" label-width="70px">
	      <el-select v-model="delTaskIndex">
	      	<el-option 
	      		v-for="(step,index) in delTasks"
	      		:key="index"
	      		:label="step.ch_name"
	      		:value="index">
	      		</el-option>
	      </el-select>
	    </el-form-item>
	  </el-form>
	  <div slot="footer" class="dialog-footer">
	    <el-button @click="delTaskVisible = false">取 消</el-button>
	    <el-button type="danger" @click="delTaskExe">删除</el-button>
	  </div>
	</el-dialog>

	<!--添加流程/任务-->
	<el-dialog :title="'添加'+actionType" :visible.sync="taskVisible" width="40%">
		<el-form>
	    <el-form-item :label="actionType+'名'" label-width="70px">
	      <el-input v-model="FlowTaskName" @keyup.enter.native="save"	></el-input>
	    </el-form-item>
	  </el-form>
	  <div slot="footer" class="dialog-footer">
	    <el-button @click="taskVisible = false">取 消</el-button>
	    <el-button type="primary" @click="save">确 定</el-button>
	  </div>
	</el-dialog>

	<!--模版信息-->
	<el-row :gutter="6">
  	<el-col :lg="4">
  		<span>中文名: </span><span>{{temp_data.ch_name}}</span>
  	</el-col>
  	<el-col :lg="4">
  		<span>英文名: </span><span>{{temp_data.en_name}}</span>
  	</el-col>
  	<el-col :lg="4">
  		<span>分组: </span><span>{{group_data.ch_name}}</span>
  	</el-col>
  	<el-col :lg="3">
  		<span>启用: </span><el-tag size="small" type="success" effect="dark">{{temp_data.enabled}}</el-tag>
  	</el-col>
  	<el-col :lg="6">
  		<span>创建时间: </span><span>{{temp_data.create_time}}</span>
  	</el-col>
  	<el-col :lg="3">
  		<el-button type="primary" size="small"  @click="showForm('添加',{})" v-if="activeName=='info'">添加字段</el-button>
  		<el-button type="primary" size="small"  @click="add('流程')" v-else>添加流程</el-button>
  	</el-col>
	</el-row>
	<el-divider></el-divider>

	<el-tabs type="border-card" v-model="activeName">
	  <el-tab-pane label="项目基本信息" name="info">
	  	<fieldTable :fields="fields" @showForm="showForm" @getFields="getFields"></fieldTable>
	  </el-tab-pane>
	  <el-tab-pane label="项目流程" name="flow">
	  	<el-card class="box-card" v-for="(flow,index) in flows" :key="index">
			  <div slot="header" class="clearfix">
			    <span style="padding: 2px 10px;font-size: 12px;background: #616fdf;color: white;">序号-{{index+1}}</span>
			    <span style="padding: 2px 10px">{{flow.ch_name}}</span>
			    <i class="fa fa-close del-flow" @click="delFlow(index)"></i>
			    <el-button style="float: right;margin-left: 5px;" type="danger" plain size="mini" @click="delTaskBefore(index)">删除任务</el-button>
			    <el-button style="float: right;" type="primary" plain size="mini" @click="add('任务',index)">添加任务</el-button>
			  </div>
			  <div class="text item">
			    <el-steps finish-status="wait" process-status="finish">
				    <el-step 
				    :title="step.ch_name"  v-for="(step,tindex) in flow.steps"
				    :key="tindex">
				    </el-step>
				  </el-steps>
			  </div>
			</el-card>
	  </el-tab-pane>
	</el-tabs>
</div>
</template>
<script>
import {getAPItoken,postAPItoken,deleteAPItoken} from '@/utils/api'
import fieldTable from './fieldTable'
import fieldForm from './fieldForm'
export default {
	props: {
		temp_data: Object,
		group_data: Object
	},
	components: {
		fieldTable,
		fieldForm
	},
	data () {
		return {
			actionType: '流程',
			activeName: 'info',
			FlowTaskName: null,
			fields: [],
			flowIndex: 0,
			delTaskIndex: null,
			delTasks: [],
			flows: [],
			taskVisible: false,
			delTaskVisible: false
		}
	},
	methods: {
		add (type,index) {
			this.taskVisible = true
			if(index){
				this.flowIndex = index
			}
			this.actionType = type
			this.taskVisible = true
		},
		delTaskBefore (index) {
			this.delTasks = this.flows[index].steps
			this.delTaskVisible = true
		},
		delTaskExe () {
			var promise = deleteAPItoken(API.flowTask+this.delTasks[this.delTaskIndex].id+'/',this.$store.state.user.token)
			promise.then(res=>{
				if(res.status == 204){
					this.delTasks.splice(this.delTaskIndex,1)
					this.$message({
	          type: 'success',
	          message: '删除成功!'
	        })
				}
			})
		},
		delFlow (index) {
			this.$confirm('删除流程:'+this.flows[index].ch_name+', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
      	const promise = deleteAPItoken(API.proFlow+this.flows[index].id+'/',this.$store.state.user.token)
      	promise.then(res=>{
      		console.log(res)
      	})
      	this.flows.splice(index,1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {});
		},
		save () {
			if (this.actionType == '流程'){
				var order = this.flows.length + 1
				var flow = {'template':this.temp_data.id,'ch_name':this.FlowTaskName, 'order': order}
				var promise = postAPItoken(API.proFlow,flow,this.$store.state.user.token)
			}	else {
				var order = this.flows[this.flowIndex].steps.length + 1
				var task = {'flow':this.flows[this.flowIndex].id, 'ch_name': this.FlowTaskName, 'order': order}
				var promise = postAPItoken(API.flowTask,task,this.$store.state.user.token)
			}
			promise.then((res)=>{
				if(res.status){
					this.$notify({
						title: '成功',
	          type: 'success',
	          message: this.actionType+'添加成功!'
	        })
	        if (this.actionType == '流程'){
	        	this.flows.push({'id':res.data.id,'ch_name':this.FlowTaskName,'steps':[]})
	        }else{
	        	this.flows[this.flowIndex].steps.push({'id':res.data.id,'ch_name':this.FlowTaskName})
	        }
	        this.getFlows()
				}else{
					this.$notify({
						title: '失败',
	          type: 'error',
	          message: this.actionType+'添加失败! '+res.data
	        })
				}
			})
			this.FlowTaskName = null
		},
		showForm (action,form) {
			this.$refs.fieldform.showForm(action,form)
		},
		getFields () {
      const promise = getAPItoken(API.tempField+'?template='+this.$route.query.id,this.$store.state.user.token)
      promise.then((data)=>{
        this.fields = data
      })
    },
    getFlows () {
    	const promise = getAPItoken(API.proFlow+'?template='+this.$route.query.id,this.$store.state.user.token)
      promise.then((data)=>{
        this.flows = data
      })
    }
	},
	mounted () {
		this.getFields()
		this.getFlows()
	}
}
</script>
<style scoped>
span {
	color: #7a838f;
}

.el-card {
	margin-bottom: 10px;
}

.taskInput {
	margin-top: 20px;
}
.del-flow {
	float: right;
	margin-left: 20px;
	line-height: 25px;
	color: red;
	cursor: pointer;
}
</style>